<template>
  <div class="home" style="border:2px solid blue" >
   <span> 父组件的信息，动态修改某个值，然后把这个值传入子组件中：</span>
   <input type="number" v-model.number="fatherValue">
     <!-- <son-1 :mayuhang="fatherValue"></son-1>
     <son-1 :mayuhang="fatherValue"></son-1>
     <son-1 :mayuhang="fatherValue"></son-1> -->
     <!-- <son-son-my :percentage="fatherValue"></son-son-my>
     <updown :type="fatherValue"></updown>
     <button @click="up">加油门</button>
     <button @click="down">减油门</button> -->
     <slider :value="fatherValue" @callFather="methodFather" ></slider>
  </div>
</template>

<script>
import Son1 from '@/components/son1.vue'
import Updown from '@/components/updown.vue';
import Slider from '@/components/slider.vue';
// @ is an alias to /src

//类似之前 new Vue();
export default {
  name: 'HomeView',
  components: {
      SonSonMy:Son1,
      Updown,
    Slider
    },
    data() {
      return {
        fatherValue:50
      }
    },
    methods:{
      up(){
        this.fatherValue++;
      },
      down(){
        this.fatherValue--;
      },
      methodFather(val,value2){
          console.log(val,value2);
          this.fatherValue = val
      }
    }

}
</script>
